<template>
  <div>
    <van-nav-bar fixed title="收银记录" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top pos-r">
      <div class="head-bg-box bg-primary pos-a">
        <img class="pos-a bottom-0 right-0" :src="bgImg">
      </div>
      <div class="contain pos-a bg-white full-width" />
      <div class="page-content-box pos-r">
        <datetime-filter
          :time-start-select="timeStartSelect"
          :time-end-select="timeEndSelect"
          @openDatetimeSelect="openDatetimeSelect"
          @onStartConfirm="onStartConfirm"
          @onEndConfirm="onEndConfirm"
          @close="close"
          @getData="getData"
        />
        <div class="flex-s-c plr-25 mt-60 mlr-25">
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">收款笔数</span>
            <span class="fs-64 fw-600">{{ OrderCount }}</span>
          </div>
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">收款金额</span>
            <span class="fs-64 fw-600">{{ TotalSale }}</span>
          </div>
        </div>
        <div class="total-box mt-50 mlr-25 flex-s-s flex-d-c bg-white br-12 pd-30">
          <div class="flex-s-c fs-26 pos-r">
            <p class="width-33 color-gray">收款方式</p>
            <p class="width-33 color-gray tac">收款笔数(笔)</p>
            <p class="width-33 color-gray tar">收款金额</p>
          </div>
          <div v-for="(item,index) in PayWayTotalList" :key="index" class="flex-s-c fs-26 pos-r pt-30">
            <p class="flex-v-c pos-r width-33">
              <svg-icon v-if="item.PayWay===4" icon-class="wechatpay" class="fs-40 mr-20" />
              <svg-icon v-if="item.PayWay===5" icon-class="alipay" class="fs-40 mr-20" />
              <svg-icon v-if="item.PayWay===1" icon-class="balance" class="fs-40 mr-20" />
              <svg-icon v-if="item.PayWay===8" icon-class="unionpay" class="fs-40 mr-20" />
              <span>{{ item.PayWayName }}</span>
            </p>
            <p class="color-primary fw-b width-33 tac">{{ item.OrderCount }}</p>
            <p class="fw-b fs-30 width-33 tar">+ {{ item.TotalSale }}</p>
          </div>
          <div v-if="PayWayTotalList.length===0" class="tac fs-30">暂无数据</div>
        </div>
        <div class="mlr-25">
          <content-search
            :search-val="searchVal"
            placeholder="请输入会员号/姓名/手机"
            theme="1"
            @clear="clear"
            @getVal="getVal"
            @search="search"
          />
        </div>
        <record-list :list="recordList" img-size="74" type="cash" @openDetail="openDetail" />
        <no-data v-if="recordList.length === 0" />
        <p v-if="end===true&&recordList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import recordList from 'components/recordList'
import datetimeFilter from 'components/datetimeFilter'
import noData from 'components/noData'
import { GetCashierPage, GetCashierTotal } from 'api/order'
import utils from 'utils/utils'
export default {
  components: {
    contentSearch,
    recordList,
    datetimeFilter,
    noData
  },
  data() {
    return {
      bgImg: require('assets/images/cashList.png'),

      searchVal: undefined,

      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      GetCashierTotalRequest: {},
      GetCashierPageRequest: {
        PageIndex: 1,
        PageSize: 10
      },

      // 统计数据
      OrderCount: 0,
      TotalSale: 0,
      PayWayTotalList: [],

      // 记录列表
      recordList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.GetCashierTotal()
    this.GetCashierPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      this.scollRequest = true
      this.end = false
      this.GetCashierPageRequest.SearchKey = val
      this.GetCashierPageRequest.PageIndex = 1
      this.recordList = []
      this.GetCashierPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    openDatetimeSelect() {
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },

    // 时间筛选
    getData(value) {
      this.scollRequest = true
      this.end = false
      this.clear()

      this.GetCashierTotalRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetCashierTotalRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.GetCashierTotal()

      this.GetCashierPageRequest.PageIndex = 1
      this.GetCashierPageRequest.SearchKey = undefined
      this.GetCashierPageRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetCashierPageRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.recordList = []
      this.GetCashierPage()
    },
    GetCashierTotal() {
      const _this = this
      GetCashierTotal(_this.GetCashierTotalRequest).then(res => {
        if (res.Data) {
          const RES = res.Data
          _this.OrderCount = RES.OrderCount || 0
          _this.TotalSale = RES.TotalSale || 0
          _this.PayWayTotalList = RES.PayWayTotalList
        }
      })
    },
    GetCashierPage() {
      GetCashierPage(this.GetCashierPageRequest).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.Id = tem.ID
              this.recordList.push(tem)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    openDetail(id) {
      console.log(id)
      this.$router.push('/storeManage/cashDetail/' + id)
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.GetCashierPageRequest.PageIndex < _this.totalAmout) {
            _this.GetCashierPageRequest.PageIndex++
            _this.GetCashierPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 466px;
  border-radius: 0;
  img {
    width: 280px;
    height: 220px;
  }
}
.contain {
  top: 500px;
  min-height: calc(100% - 548px);
  border-radius: 24px 24px 0 0;
}
</style>
